<template>
	<!-- :boxStyle="keyboardStyle" -->
	<custom-nav :showBackArrow="true" title=" "></custom-nav>
	<view class="page-chat" :style="[pagePaddingTop,pageChatStyle]">

		<scroll-view scroll-y :style="[chatBodyMainStyle,chatBodyStyle]" :scroll-into-view="scviewBottomId">
			<view class="container-chat-body" id='refContent'>

				<view v-for="(item,idx) in list" :key="idx"
					:class="['container-chat-item',item.messageType==102?'openai':'',item.messageType==101?'self':'']">
					<view class="box-chat-item">
						<view class="container-chat-item-main">
							<view class="cont-chat-message">
								<template v-if="item.messageType==101">{{item.show_mid_table_remark_001}}</template>
								<template v-if="item.messageType==102">{{item.show_mid_table_remark_002}}</template>
							</view>
						</view>
					</view>
					<view
						:class="['box-chat-operation',item.messageType==101?'my':'',item.messageType==102?'openai':'']">
						<template v-if="item.messageType==102">

							<view v-if="item.id_public_user_info==userInfo.id_public_user_info"
								class="box-icon-operation" @tap="onDelete(item,idx)">
								<image :class="['icon-img','delete']" src="/static/icon_chat_detail_delete.png"></image>
							</view>
							<view
								:class="['box-icon-operation',(item.show_save_data_004&&(item.show_save_data_004.is_online===0||item.show_save_data_004.is_online==='0'))?'activated':'']"
								@tap="onCollect(item)">
								<image :class="['icon-img','collect']"
									:src="(item.show_save_data_004&&(item.show_save_data_004.is_online===0||item.show_save_data_004.is_online==='0'))?'/static/chat/icon_collect_selected.png':'/static/chat/icon_collect.png'">
								</image>
							</view>
							<view
								:class="['box-icon-operation',(item.show_save_data_003&&(item.show_save_data_003.is_online===0||item.show_save_data_003.is_online==='0'))?'activated':'']"
								@tap="onLike(item)">
								<image :class="['icon-img','like']"
									:src="(item.show_save_data_003&&(item.show_save_data_003.is_online===0||item.show_save_data_003.is_online==='0'))?'/static/chat/icon_like_selected.png':'/static/chat/icon_like.png'">
								</image>
							</view>
							<view v-if="item.id_public_user_info==userInfo.id_public_user_info"
								:class="['box-icon-operation',item.mid_table_remark_015==1502?'activated':'']"
								@tap="onPublic(item)">
								<image :class="['icon-img','showorhide']"
									:src="item.mid_table_remark_015==1502?'/static/chat/icon_public_selected.png':'/static/chat/icon_public.png'">
								</image>
							</view>
							<view class="box-icon-operation" @tap="onCopy(item)">
								<image :class="['icon-img','copy']" src="/static/icon_chat_detail_copy.png"></image>
							</view>
						</template>
						<template v-if="item.messageType==101&&idx!==list.length-1">

							<view class="box-edit" @tap="onCopyAndSetMessage(item)">
								<image class="icon-edit" src="/static/icon_chat_edit.png"></image><text>编辑</text>
							</view>
						</template>
					</view>
				</view>

				<view v-if="writingItem" :class="['container-chat-item','openai']">
					<view class="box-chat-item">
						<view class="container-chat-item-main">
							<view class="cont-chat-message">

								{{writingItem}}
							</view>
						</view>
					</view>
				</view>

				<!-- -->
				<view v-if="waiting&&!writingItem" class="box-wait">
					<!-- <view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view> -->
					<view class="loading"></view>
				</view>
				<view id="bottomhere"></view>
			</view>
		</scroll-view>

		<view class="container-bottom" :style="bottomButtonStyle">
			<view class="box-send-message">
				<!-- :adjust-position="false" -->
				<input class="input-message" v-model="message" placeholder="请输入文字......" @confirm="onSend"
					:adjust-position="false" />
				<view class="btn-send" @tap="onSend">
					<image class="icon-send" src="/static/icon_send_arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue"
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom,
		onUnload,
		onHide
	} from '@dcloudio/uni-app'
	import {
		showBRContent,
		showDecodeBase64
	} from "@/utils/tool.js"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	import {
		chatGPTAPI
	} from "@/http/apis/chatAPI.js"
	import {
		sendWsData,
		connect,
		closeSocket
	} from "@/http/socketAction.js"
	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		showToast
	} from "@/utils/frameApi"
	const userStore = useUser();
	// 用户信息
	let userInfo = ref(null)
	userStore.getUserInfo().then(async res => {
		userInfo.value = res?.public_user_info || {};
	}, err => {
		console.log(err, '>>>userinfo')
	})
	// 行业信息
	let industryId = ref("");
	let industryName = ref("");
	//会话ID
	let originSessionId = ref("")
	let chatSessionId = ref("")
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})
	let scviewBottomId = ref("bottomhere")

	const scrollToBottom = () => {
		scviewBottomId.value = ""
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				scviewBottomId.value = "bottomhere"
				resolve(true)
				// let query = uni.createSelectorQuery()
				// query.select(`#refContent`).boundingClientRect((res) => {
				// 	uni.pageScrollTo({
				// 		scrollTop: res.height,
				// 		duration: 0
				// 	})
				// 	resolve(res);


				// }).exec();
			}, 300)
		})

	}
	let message = ref("")
	let list = ref([])
	let page = ref(1);
	let notMore = ref(false)
	// 获取原会话数据
	const getOriginList = async () => {
		return new Promise(async (resolve, reject) => {
			let queryParas = {
				invoke_method: 'public_load_middle_table_list',
				pre_db_para_middle_table_name: 'public_middle_table_lite_mod_ai_chatgpt',
				type_middle_app: 30001,
				type_inner_app: 1001,
				is_online: 0,
				// pre_db_para_begin_idx: (page.value - 1) * pageSize,
				// pre_db_para_length_4_list: pageSize,
				pre_db_para_order_by_para: 'id_public_middle_table ASC',
				pre_cmd_para_show_main_info: true,
				mid_table_remark_008_in: industryId.value,
				// mid_table_remark_015_like:翻译,
				mid_table_remark_013_in: originSessionId.value,
				pre_cmd_para_show_main_info: true
			}
			let response = await middleAPI(queryParas).catch((err) => {
				console.log(err, ">>>getSessionIdChatList")
			})
			if (response) {
				let result = response?.page_content || []
				let showResultList = []
				try {
					result.forEach(item => {

						item.show_mid_table_remark_001 = item.mid_table_remark_001;
						item.show_mid_table_remark_002 = item.mid_table_remark_002;

						item.show_mid_table_remark_001 = showBRContent(showDecodeBase64(item
							.show_mid_table_remark_001))
						item.show_mid_table_remark_002 = showBRContent(showDecodeBase64(item
							.show_mid_table_remark_002))
						item.show_save_data_003 = ((item?.save_data_003 || [])[0]) || null
						item.show_save_data_004 = ((item?.save_data_004 || [])[0]) || null
						showResultList.push(Object.assign({
							messageType: 101
						}, item))
						showResultList.push(Object.assign({
							messageType: 102
						}, item))
					})
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}

				let tmpList = list.value;
				tmpList = showResultList.concat(tmpList)
				list.value = tmpList
				console.log(tmpList, "tmpList>>>>>");
			}
			scrollToBottom();
			resolve()
		})
	}
	// 全量加载会话数据要不然插入顺序和原会话顺序混乱
	const getList = async () => {
		const pageSize = 50

		let queryParas = {
			invoke_method: 'public_load_middle_table_list',
			pre_db_para_middle_table_name: 'public_middle_table_lite_mod_ai_chatgpt',
			type_middle_app: 10001,
			type_inner_app: 1001,
			is_online: 0,
			// pre_db_para_begin_idx: (page.value - 1) * pageSize,
			// pre_db_para_length_4_list: pageSize,
			pre_db_para_order_by_para: 'id_public_middle_table ASC',
			pre_cmd_para_show_main_info: true,
			mid_table_remark_008_in: industryId.value,
			// mid_table_remark_015_like:翻译,
			mid_table_remark_013: chatSessionId.value,
			pre_cmd_para_show_main_info: true
		}
		let response = await middleAPI(queryParas).catch((err) => {
			console.log(err, ">>>getSessionIdChatList")
			let nextPage = page.value - 1;
			page.value = nextPage > 0 ? nextPage : 1;
		})
		if (response) {
			let result = response?.page_content || []
			let showResultList = []
			try {
				result.forEach(item => {

					item.show_mid_table_remark_001 = item.mid_table_remark_001;
					item.show_mid_table_remark_002 = item.mid_table_remark_002;

					item.show_mid_table_remark_001 = showBRContent(showDecodeBase64(item
						.show_mid_table_remark_001))
					item.show_mid_table_remark_002 = showBRContent(showDecodeBase64(item
						.show_mid_table_remark_002))
					item.show_save_data_003 = ((item?.save_data_003 || [])[0]) || null
					item.show_save_data_004 = ((item?.save_data_004 || [])[0]) || null
					showResultList.push(Object.assign({
						messageType: 101
					}, item))
					showResultList.push(Object.assign({
						messageType: 102
					}, item))
				})
			} catch (e) {
				//TODO handle the exception
				console.log(e)
			}

			let tmpList = list.value;
			tmpList = showResultList.concat(tmpList)
			list.value = tmpList
			console.log(tmpList, "tmpList>>>>>");
		}
		scrollToBottom();
	}
	
	const onHistory = () => {
		uni.navigateBack()
	}
	// 删除
	const onDelete = (item, idx) => {
		if (item && item.id_public_middle_table) {
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_ai_chatgpt",
				pre_db_para_id_public_middle_table: item.id_public_middle_table,
				type_middle_app: 10001,
				type_inner_app: 1001,
				is_online: 111
			}
			middleAPI(queryParas).then(() => {
				let tmpList = list.value;
				tmpList.splice(idx - 1, 2)
				list.value = tmpList;
				showToast({
					title: '删除成功'
				})
			}, err => {
				showToast({
					title: '删除失败'
				})
			})
		}
	}
	// 收藏
	const onCollect = async (item) => {
		if (item && item.id_public_middle_table) {
			if (item.show_save_data_004) {
				let queryParas = {
					invoke_method: "public_insert_or_update_middle_table",
					pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
					pre_db_para_id_public_middle_table: item.show_save_data_004.id_public_middle_table,
					is_online: (item.show_save_data_004.is_online && item.show_save_data_004.is_online !==
						'0') ? 0 : 1,
				}
				middleAPI(queryParas).then(() => {
					item.show_save_data_004.is_online = (item.show_save_data_004.is_online && item
						.show_save_data_004.is_online !== '0') ? 0 : 1
				}, err => {
					console.log(err, ">>>>>")
				})
			} else {
				let queryParas = {
					invoke_method: "public_insert_or_update_middle_table",
					pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
					is_online: 0,
					id_public_user_info: userInfo?.value?.id_public_user_info || '',
					mid_table_remark_001: item.mid_table_remark_001,
					mid_table_remark_002: item.mid_table_remark_002,
					mid_table_remark_013: item.mid_table_remark_013,
					mid_table_remark_017: userInfo?.value?.nick_name || '-1',
					mid_table_remark_018: userInfo?.value?.user_phone || '-1',
					mid_table_remark_019: userInfo?.value?.weichat_img || '-1',
					table_id_father: item.id_public_middle_table,
					type_middle_app: 90001,
					type_inner_app: 1001,
				}
				let response = await middleAPI(queryParas).catch((err) => {
					console.log(err)
				})
				if (response) {
					item.show_save_data_004 = response?.page_content[0] || null
				}
				console.log(response, '>>>>>>>>>>>>>suc')
			}

		}

	}
	// 点赞
	const onLike = async (item) => {
		if (item && item.id_public_middle_table) {

			if (item.show_save_data_003) {
				let queryParas = {
					invoke_method: "public_insert_or_update_middle_table",
					pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
					pre_db_para_id_public_middle_table: item.show_save_data_003.id_public_middle_table,
					is_online: (item.show_save_data_003.is_online && item.show_save_data_003.is_online !==
						'0') ? 0 : 1,
				}
				middleAPI(queryParas).then(() => {
					item.show_save_data_003.is_online = (item.show_save_data_003.is_online && item
						.show_save_data_003.is_online !== '0') ? 0 : 1
				}, err => {
					console.log(err, ">>>>>")
				})
			} else {
				let queryParas = {
					invoke_method: "public_insert_or_update_middle_table",
					pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
					is_online: 0,
					id_public_user_info: userInfo?.value?.id_public_user_info || '',
					mid_table_remark_001: item.mid_table_remark_001,
					mid_table_remark_002: item.mid_table_remark_002,
					mid_table_remark_013: item.mid_table_remark_013,
					mid_table_remark_017: userInfo?.value?.nick_name || '-1',
					mid_table_remark_018: userInfo?.value?.user_phone || '-1',
					mid_table_remark_019: userInfo?.value?.weichat_img || '-1',
					table_id_father: item.id_public_middle_table,
					type_middle_app: 90001,
					type_inner_app: 2002,
				}
				let response = await middleAPI(queryParas).catch((err) => {
					console.log(err)
				})
				if (response) {
					item.show_save_data_003 = response?.page_content[0] || null
				}
			}
		}
	}
	const onPublic = (item) => {
		if (item && item.id_public_middle_table) {
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_ai_chatgpt",
				pre_db_para_id_public_middle_table: item.id_public_middle_table,
				mid_table_remark_015: item.mid_table_remark_015 == 1502 ? 1501 : 1502
			}
			console.log(queryParas, ">>>queryParas")
			middleAPI(queryParas).then((res) => {
				item.mid_table_remark_015 = item.mid_table_remark_015 == 1502 ? 1501 : 1502
			}, err => {
				console.log(err, ">>>>>")
			})

		}
	}
	// 拷贝
	const onCopy = (item) => {
		if (item && item.show_mid_table_remark_002) {
			uni.setClipboardData({
				data: item.show_mid_table_remark_002,
				showToast: false,
				success: function() {
					// console.log('success');
					showToast({
						title: "内容已复制"
					})
					message.value = item.show_mid_table_remark_002
				}
			});
		}
	}
	const onCopyAndSetMessage = (item) => {
		if (item && item.show_mid_table_remark_002) {
			message.value = item.show_mid_table_remark_001
		}
	}
	let refContent = ref(null)
	let waiting = ref(false)
	let writing = false;
	let writingItem = ref("")
	let timer = null;
	// 更新列表数据
	const getLastList = async () => {
		let queryParas = {
			invoke_method: 'public_load_middle_table_list',
			pre_db_para_middle_table_name: 'public_middle_table_lite_mod_ai_chatgpt',
			type_middle_app: 10001,
			type_inner_app: 1001,
			is_online: 0,
			pre_db_para_begin_idx: 0,
			pre_db_para_length_4_list: 1,
			pre_db_para_order_by_para: 'id_public_middle_table DESC',
			pre_cmd_para_show_main_info: true,
			mid_table_remark_008_in: industryId.value,
			// mid_table_remark_015_like:翻译,
			mid_table_remark_013: chatSessionId.value
		}
		console.log(queryParas, "><MM<M<")
		let response = await middleAPI(queryParas).catch((err) => {
			console.log(err, ">eee")
		})
		console.log(queryParas, ">>>>>", response, ">>>>")
		if (response) {
			let result = response?.page_content || []
			let showResultList = []
			try {
				result.forEach(item => {
	
					item.show_mid_table_remark_001 = item.mid_table_remark_001;
					item.show_mid_table_remark_002 = item.mid_table_remark_002;
	
					item.show_mid_table_remark_001 = showBRContent(showDecodeBase64(item
						.show_mid_table_remark_001))
					item.show_mid_table_remark_002 = showBRContent(showDecodeBase64(item
						.show_mid_table_remark_002))
	
					showResultList.push(Object.assign({
						messageType: 101
					}, item))
					showResultList.push(Object.assign({
						messageType: 102
					}, item))
				})
			} catch (e) {
				//TODO handle the exception
				console.log(e)
			}
			if (showResultList.length > 0) {
				let historyList = list.value;
				historyList[historyList.length - 1] = showResultList[0]
				historyList.push(showResultList[1])
				writingItem.value = "";
			}
			else{
				writingItem.value="";
				writing=false;
				waiting.value=false;
				list.value.splice(list.value.length-1,1)
				showToast({
					title:"发送失败，请重试"
				})
				message.value=tmpMessage
			}
	
			// console.log("JSON>>1", JSON.parse(JSON.stringify(historyList)))
	
			// historyList.pop()
			// let tmpList = historyList;
			// console.log("JSON>>2", JSON.parse(JSON.stringify(tmpList)))
			// tmpList = tmpList.concat(showResultList)
			// list.value = tmpList
	
		}
		scrollToBottom();
	}
	const onSend = async () => {
		if (!waiting.value && !writing) {
			waiting.value = true;
			if (message.value) {
				list.value.push({
					messageType: 101,
					show_mid_table_remark_001: message.value
				})
				let tmpMessage = message.value;
				timer = null
				message.value = "";

				scrollToBottom()

				let postData = {
					invoke_method: 'question_and_answer_hangye',
					pre_cmd_para_id_public_user_info: userInfo.value.id_public_user_info,
					pre_cmd_para_mid_table_remark_008: industryId.value,
					pre_cmd_para_session_id: chatSessionId.value
				}
				let urlParams = []
				for (const key in postData) {
					let item = postData[key]
					urlParams.push(`${key}=${item}`)
				}
				let strUrlParams = urlParams.join("&")
				let connectResult = await connect(strUrlParams).catch(err => {
					waiting.value = false;
					writing = false;
					console.log("connnectError", err)
				})
				if (connectResult) {
					// let timer = null;
					let resultText = "";
					writingItem.value = "";
					let result = await sendWsData(tmpMessage, (event) => {
						if (event.data) {
							resultText += event.data;
							writingItem.value = showBRContent(resultText)
							scrollToBottom()
							if (timer) {
								clearTimeout(timer)
								timer = null;
							}

							timer = setTimeout(() => {
								clearTimeout(timer)
								waiting.value = false;
								writing = false;
								// writingItem.value = ""
								getLastList();
							}, 1500)
						}
					}).catch(() => {
						console.log("error>>>socket...close")
					})
					if (!result) {
						clearTimeout(timer)
						waiting.value = false;
						writing = false;
						writingItem.value = false;
						list.value.splice(list.value.length - 1, 1)
						showToast({
							title: "抱歉，您已中断，请重新发送"
						})
						message.value = tmpMessage;
					}
				} else {
					clearTimeout(timer)
					waiting.value = false;
					writing = false;
					writingItem.value = false;
					list.value.splice(list.value.length - 1, 1)
					showToast({
						title: "抱歉，网络出错，请稍后重试"
					})
					message.value = tmpMessage;
				}
			} else {
				waiting.value = false;
			}
		}
	}
	let keyboardStyle = ref({})
	let bottomButtonStyle = ref({})
	let pageBottomStyle = ref({})
	const rpx182 = uni.upx2px(182)
	let pageChatStyle = ref({})

	let systemInfo = uni.getSystemInfoSync();
	let chatBodyStyle = ref({})

	uni.onKeyboardHeightChange(res => {

		// console.log(res.height)
		if (res.height > 0) {
			let tmpHeight = res.height - (navHeightInfo.statusBarHeight / 2) - uni.upx2px(10);
			// #ifndef APP-PLUS
			console.log(res.height, ">>>>>>>>>>>>>>>>>>>>", navHeightInfo.statusBarHeight, '3333')
			tmpHeight = res.height - (navHeightInfo.statusBarHeight / 2) //-uni.upx2px(10);
			// #endif
			keyboardStyle.value = {
				'transform': `translateY(${tmpHeight}px)`,
				'webkitTransform': `translateY(${tmpHeight}px)`,
			}
			bottomButtonStyle.value = {
				'transform': `translateY(${-res.height}px)`,
				'webkitTransform': `translateY(${-res.height}px)`,
			}

			pageChatStyle.value = {
				"position": 'fixed',
				"top": 0,
				"left": 0,
				"height": `${systemInfo.windowHeight -  res.height}px`,
				"overflow": "hidden",
				"paddingBottom": `${res.height}px`,
				// "overflow": "hidden",
				// "overflowY": "auto"
			}
			chatBodyStyle.value = {
				"height": `${systemInfo.windowHeight - (navHeightInfo.navTotalHeight + res.height + rpx182)}px`,
			}

		} else {
			keyboardStyle.value = {
				'transform': `translateY(0px)`,
				'webkitTransform': `translateY(0px)`,
			}
			bottomButtonStyle.value = {
				'transform': `translateY(0px)`,
				'webkitTransform': `translateY(0px)`,
			}
			pageChatStyle.value = {}
			chatBodyStyle.value = {};
		}
		scrollToBottom()

	})
	let chatBodyMainStyle = ref({
		"height": `${systemInfo.windowHeight - (navHeightInfo.navTotalHeight + rpx182)}px`,
	})

	let scrollStartTime = 0;
	let scrollEndTime = 0;
	let scrolltimer = null
	onPageScroll(() => {
		if (scrollStartTime == 0) {
			scrollStartTime = new Date().getTime();
		}
		scrollEndTime = new Date().getTime();
		if ((scrollEndTime - scrollStartTime) < 500) {
			clearTimeout(scrolltimer)
			scrolltimer = setTimeout(() => {
				scrollStartTime = 0;
				uni.pageScrollTo({
					offsetTop: 0,
					duration: 0
				})
			}, 300)
			return;
		}


	})
	// 创建sessionId
	const createSessionId = () => {
		return chatGPTAPI({
			invoke_method: 'get_chat_session_id',
			pre_cmd_para_start_new_session: true
		}, false)

	}
	const initData = async () => {
		// middleAPI({})
		if (originSessionId.value) {
			await getOriginList().catch();
		}
		if (!chatSessionId.value) {
			let sessionResult = await createSessionId().catch((err) => {
				console.log(err, ">>>CreateSeesionResult...")
			})
			chatSessionId.value = sessionResult?.big_data || ""
			if (!chatSessionId.value) {
				uni.navigateBack()
				return;
			}
			return;
		}
		console.log(chatSessionId, '111chatSessionId.value')
		getList();
	}

	onLoad((options) => {
		industryId.value = options?.id || "";
		if (!industryId.value) {
			uni.navigateBack();
		} else {
			let sessionId = options?.sessionid || "";
			chatSessionId.value = sessionId;
			let tsessionId = options?.tsessionid || "";
			originSessionId.value = tsessionId;
			console.log(sessionId, originSessionId.value, 'chatSessionId.value')
			initData()
		}
	})

	onUnload(() => {
		uni.offKeyboardHeightChange(() => {

		})
		console.log(11)
		clearTimeout(timer)
		closeSocket()
	})
	onHide(() => {
		console.log(1222)
		// closeSocket();
	})
</script>

<style lang="less" scoped>
	.page-chat {
		position: relative;
		width: 100%;
		padding-top: 80rpx;
		padding-bottom: 182rpx;
		box-sizing: border-box;
		background-color: #182836;
		display: flex;
		display: -wekbit-flex;
		flex-direction: column;
		overflow: hidden;

		.container-back {
			position: fixed;
			top: 0;
			width: 100%;
			height: 80rpx;
			padding-top: 2rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			background-color: #182836;
			box-sizing: border-box;
			z-index: 3;

			.wrap-icon-back {
				position: relative;
				width: 76rpx;
				height: 76rpx;
				background: #121F2B;
				border-radius: 50%;

				.icon-back {
					position: absolute;
					width: 21rpx;
					height: 37rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
				}
			}
		}

		.container-page {
			position: relative;
			width: 100%;
			flex: 1;
			overflow: hidden;

			.container-page-main {
				position: absolute;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.scview-chat {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}

		.container-chat-body {
			position: relative;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 18rpx;
			box-sizing: border-box;

			.container-chat-item {
				position: relative;
				width: 100%;
				margin-bottom: 40rpx;

				.box-chat-item {
					position: relative;
					width: 100%;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;

					.container-chat-item-main {
						position: relative;
						flex: auto;
						width: 0;
						display: flex;
						display: -webkit-flex;
						flex-direction: row;

						.cont-chat-message {
							position: relative;
							max-width: 100%;
							padding: 30rpx;
							box-sizing: border-box;
							font-size: 30rpx;
							// font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: justify;
							white-space: pre-wrap;
						}
					}
				}

				.box-chat-operation {
					position: relative;
					width: 100%;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;

					&.my {
						margin-top: 24rpx;
					}

					&.openai {
						margin-top: 20rpx;
					}

					.box-edit {
						position: relative;
						display: flex;
						display: -webkit-flex;
						flex-direction: row;
						align-items: center;

						font-size: 28rpx;
						// font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;

						.icon-edit {
							position: relative;
							width: 26rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}
					}

					.box-icon-operation {
						position: relative;
						width: 50rpx;
						height: 50rpx;
						background: #2D4052;
						border-radius: 50%;
						box-sizing: border-box;
						margin-right: 28rpx;

						&.activated {

							background: rgba(0, 255, 246, 1);
						}

						&:last-child {
							margin-right: 0;
						}

						.icon-img {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							width: 30rpx;
							height: 30rpx;




						}
					}
				}

				&.self {
					.box-chat-item .container-chat-item-main {
						justify-content: flex-end;
					}

					.box-chat-item .container-chat-item-main .cont-chat-message {

						background: #00FFF6;
						border-radius: 44rpx 4rpx 44rpx 44rpx;
						color: #182836;
					}

					.box-chat-operation {
						justify-content: flex-end;
					}
				}

				&.openai {
					.box-chat-item .container-chat-item-main .cont-chat-message {
						background: #2D4052;
						border-radius: 4rpx 32rpx 32rpx 32rpx;
					}

				}



			}

			.box-wait {
				position: relative;
				width: 154rpx;
				height: 88rpx;
				background: #2D4052;
				border-radius: 12rpx 44rpx 44rpx 44rpx;
				text-align: center;
				line-height: 88rpx;
				box-sizing: border-box;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.loading:before,
				.loading:after,
				.loading {
					border-radius: 50%;
					width: 14rpx;
					height: 14rpx;
					-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
					-webkit-animation: load7 1.8s infinite ease-in-out;
					animation: load7 1.8s infinite ease-in-out;
				}

				.loading {
					margin: 0em auto;
					font-size: 10rpx;
					position: relative;
					text-indent: -9999em;
					-webkit-animation-delay: -0.16s;
					animation-delay: -0.16s;
					margin-bottom: 44rpx;
				}

				.loading:before {
					left: -3.5em;
					-webkit-animation-delay: -0.32s;
					animation-delay: -0.32s;
				}

				.loading:after {
					left: 3.5em;
				}

				.loading:before,
				.loading:after {
					content: '';
					position: absolute;
					top: 0;
				}

				@-webkit-keyframes load7 {

					0%,
					80%,
					100% {
						box-shadow: 0 2.5em 0 -1.3em #ffffff;
					}

					40% {
						box-shadow: 0 2.5em 0 0 #FFF;
					}
				}

				@keyframes load7 {

					0%,
					80%,
					100% {
						box-shadow: 0 2.5em 0 -1.3em #ffffff;
					}

					40% {
						box-shadow: 0 2.5em 0 0 #FFF;
					}
				}

				.dot {
					position: relative;
					width: 14rpx;
					height: 14rpx;
					background: #FFFFFF;
					border-radius: 50%;
					margin-right: 16rpx;
					animation: dot 1.5s infinite step-end;
					-webkit-animation: dot 1.5s infinite step-end;

					&:last-child {
						margin-right: 0;
					}
				}

				@keyframes dot {
					33% {
						transform: translateY(-2em);
					}

					66% {
						transform: translateY(-1em);
					}
				}

				@-webkit-keyframes dot {
					33% {
						-wekbit-transform: translateY(-2em);
					}

					66% {
						-wekbit-transform: translateY(-1em);
					}
				}

			}
		}

		.container-bottom {
			position: fixed;
			width: 100%;
			height: 164rpx;
			background: #182836;
			box-shadow: 0px -2rpx 10rpx 0px rgba(255, 255, 255, 0.08);
			border-radius: 56rpx 56rpx 0px 0px;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 24rpx;
			box-sizing: border-box;
			bottom: -1px;
			overflow: hidden;
			z-index: 3;

			.box-send-message {
				position: relative;
				width: 100%;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				.input-message {
					position: relative;
					width: 556rpx;
					height: 100rpx;
					line-height: 100rpx;
					border: 2rpx solid #00FFF6;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding-left: 26rpx;
					padding-right: 26rpx;
					box-sizing: border-box;
				}

				.btn-send {
					position: relative;
					width: 100rpx;
					height: 100rpx;
					// background: linear-gradient(0deg, #10A383 0%, #48C282 100%);
					background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
					border-radius: 28rpx;

					.icon-send {
						position: absolute;
						width: 48rpx;
						height: 48rpx;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						-webkit-transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
</style>